<template>
	<view class="container">
		<image @click="gotoSettings" src="../../static/more.png" style="width: 30px;height: 30px;margin-left: 10px;"></image>
		<image src="../../static/search.png" style="width: 35px; height: 35px;margin-right:10px;float: right;"></image>

		<view class="line">
			<view class="item">
				<view class="headimg">
					<image src="../../static/pic01.jpg"></image>
				</view>
				<view style="font-size: 20px;">Rainbow🌈</view>
			</view>
		</view>

		<view class="line2 flex">
			<view class="itemss flex flex-column align-center">
				<image src="../../static/play.png"></image>
				<view>最近播放</view>
			</view>
			<view class="itemss flex flex-column align-center">
				<image src="../../static/download.png"></image>
				<view>本地/下载</view>
			</view>
			<view class="itemss flex flex-column align-center">
				<image src="../../static/myfriend.png"></image>
				<view>我的好友</view>
			</view>
			<view class="itemss flex flex-column align-center">
				<image src="../../static/buy.png"></image>
				<view>已购歌曲</view>
			</view>
		</view>

<!-- 		<view>
			<view class="font">我喜欢的音乐</view>
			<view class="items" v-for="(item,index) in favoriteSongList" v-if="index<3">
				<image :src="item.picUrl" style="width: 80px;"></image>
				<view>
					<view style="font-size: 20px;">{{item.name}}</view>
					<view>{{item.song.artists[0].name}}</view>
				</view>
			</view>
		</view> -->
		
		<view class="music-swiper">
			<view class="font">我喜欢的音乐</view>
			<view v-if="favoriteSongList.length==0">
				<text>加载失败了😭</text>
			</view>
			<scroll-view class="zy-list" style="margin-top: 5px;" v-if="favoriteSongList.length!=0">
				<swiper style="margin-top:8px;height:190px" next-margin="30px">
					<swiper-item class="music-swiper-item" v-for="groupNo in musicSwiperGroups">
						<view class="zy-song-item flex align-center" v-for="(item, index) in favoriteSongList"
							v-if="(index>=groupNo*3)&&(index<(groupNo*3+3))">
							<image :src="item.picUrl" mode="scaleToFill" class="music-song-item-image"></image>
							<view class="music-text">
								<text style="{ color: '#000' }">{{ item.name }}</text>
								<text style="{ color: '#666';font-size:12px; }">-{{item.song.artists[0].name}}</text>
							</view>
							<text class="startIcon icon-kaishi3"></text>
						</view>
					</swiper-item>
				</swiper>
			</scroll-view>
		</view>

		<view>
			<view class="font">收藏歌单</view>
<!-- 			<view class="items" v-for="(item,index) in favoriteSongList" v-if="index==3">
				<image :src="item.picUrl" style="width: 80px;"></image>
				<view>
					<view style="font-size: 20px;">{{item.name}}</view>
					<view>{{item.song.artists[0].name}}</view>
				</view>
			</view> -->
			<view v-if="favoriteSheetList.length==0">
				<text>加载失败了😭</text>
			</view>
			<scroll-view scroll-x scroll-with-animation class="song-sheet zy-list" v-if="favoriteSheetList.length!=0">
				<view class="list-item" v-for="(item,index) in favoriteSheetList" v-if="index>10&&index<=16">
					<!-- 播放量 -->
					<view class="hotCount" v-if="item.playCount>0">
						<text class="iconfont icon-kaishi" style="margin-right: 3.5px;"></text>
						<text>{{filterPlayCount(item.playCount)}}</text>
					</view>
					<!-- 图片和文字 -->
					<view class="bg-img flex align-end list-item-image" :style="'background-image:url('+item.picUrl+')'"></view>
					<view class="list-item-text">{{item.name}}</view>
				</view>
			</scroll-view>
		</view>

		<!-- padding-bottom用于防止tabbar遮挡推荐歌单 -->
		<view style="padding-bottom: calc(var(--window-bottom) + 10px);">
			<view class="font">推荐歌单</view>
<!-- 		<view class="itemx" v-for="(item,index) in favoriteSongList" v-if="index==5">
				<image :src="item.picUrl" style="width: 80px;"></image>
				<view>
					<view style="font-size: 20px;">{{item.name}}</view>
					<view>{{item.song.artists[0].name}}</view>
				</view>
			</view> -->
			<view v-if="favoriteSheetList.length==0">
				<text>加载失败了😭</text>
			</view>
			<scroll-view scroll-x scroll-with-animation class="song-sheet zy-list" v-if="favoriteSheetList.length!=0">
				<view class="list-item" v-for="(item,index) in favoriteSheetList" v-if="index>16&&index<=22">
					<!-- 播放量 -->
					<view class="hotCount" v-if="item.playCount>0">
						<text class="iconfont icon-kaishi" style="margin-right: 3.5px;"></text>
						<text>{{filterPlayCount(item.playCount)}}</text>
					</view>
					<!-- 图片和文字 -->
					<view class="bg-img flex align-end list-item-image" :style="'background-image:url('+item.picUrl+')'"></view>
					<view class="list-item-text">{{item.name}}</view>
				</view>
			</scroll-view>
		</view>

		
	</view>
</template>

<script>
	export default {
		methods:{
			gotoSettings(){
				uni.navigateTo({
					url:"../setting/setting"
				})
			},
			filterPlayCount(val) {
				if (!val || val <= 0) return 0
				else if (val < 1000) return val
				else if (val >= 1000 && val < 10000) return Math.ceil(val / 1000) + '千'
				else if (val >= 10000 && val < 100000000) return Math.ceil(val / 10000) + '万'
				return Math.ceil(val / 100000000) + '亿'
			}
		},
		data() {
			return {
				favoriteSongList: [],
				musicSwiperGroups: [4,5,6],
				favoriteSheetList: []
			};
		},
		onLoad() {
			uni.request({
				url: 'https://autumnfish.cn/personalized/newsong?limit=25',
				success: (res) => {
					this.favoriteSongList = res.data.result;
					console.log(this.favoriteSongList)
					console.log(this.favoriteSongList[0].song.artists[0].name)
				}
			}),
			uni.request({
				url: 'https://autumnfish.cn/personalized',
				success: (res) => {
					this.favoriteSheetList = res.data.result;
					console.log(this.favoriteSheetList)
				}
			})
		}
	}
</script>

<style lang="scss">
	* {
		margin-top: 3px;
		margin-left: 3px;
	}
	//歌曲列表
	.music-swiper {
		margin: 20px 0;

		&:last-of-type {
			margin-bottom: 0;
		}
		
		.music-swiper-item {
			padding-left: 6px;
			box-sizing: border-box;
		}
		
		.zy-song-item {
			width: 100%;
		
			.music-song-item-image {
				width: 53px;
				height: 53px;
				border-radius: 7px;
				margin: 7px 10px 0 0;
			}
		
			.music-text {
				width: calc(100% - 120px);
				display: inline-block;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		
			.startIcon {
				margin-left: 15px;
				font-size: 40rpx;
				color: #ff9700;
			}
		}
	}
	//歌单
	.song-sheet {
		white-space: nowrap;
		.list-item {
			width: 27.5%;
			margin: 0 6px;
			display: inline-block;
			overflow: hidden;
			position: relative;
	
			.hotCount {
				position: absolute;
				width: 100%;
				height: 50px;
				padding: 3px 6px 0 0;
				text-align: right;
				color: #fff;
				z-index: 10;
				font-size: 12px;
			}
	
			.list-item-image {
				height: 115px;
				border-radius: 7px;
			}
	
			.list-item-text {
				height: 35px;
				width: 100%;
				padding-top: 2px;
				white-space: normal;
				color: #666;
				font-size: 12px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
		}
	}
	.item {
		width: 120px;
		display: flex;
		flex-direction: column; //使内部元素按列垂直分布
		align-items: center;

		image {
			width: 130px;
			height: 130px;
			border-radius: 50%;
			overflow: hidden
		}

		text {
			font-size: 12px;
		}
	}

	.line {
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
	}

	.line2 {
		align-items: center;
		display: flex;
		height: 80px;
		justify-content: space-around;
	}

	.font {
		font-size: 20px;
		font-weight: bold;
	}

	.items {
		display: flex;
		align-items: center;
		margin-bottom: 25px;

		image {
			width: 80px;
			height: 80px;
			border-radius: 7px;
		}

		text {
			font-size: 12px;
		}
	}

	.itemx {
		display: flex;
		align-items: center;
		margin-bottom: 100px;

		image {
			width: 80px;
			height: 80px;
			border-radius: 7px;
		}

		text {
			font-size: 12px;
		}
	}

	//固定底部导航栏
	.nav {
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		z-index: 0;
		background-color: #FFFFFF;
	}

	.line2 {
		align-items: center;
		display: flex;
		height: 80px;
		justify-content: space-around;
		color: #FF7E3E;
	}

	.itemss {
		width: 90px;
		align-items: center;
		justify-content: space-around;

		image {
			width: 40px;
			height: 40px;
		}

		text {
			font-size: 12px;
			justify-content: center;
		}
	}

	.flex {
		display: flex;

		&-column {
			flex-direction: column;
		}
	}
</style>